<template>
	<view class="search">
		<view class="search-content-one" v-if="searchStatus === 0">
			<image class="search-img" src="@/static/images/home/search.png" mode="widthFix"></image>
			<view class="search-content">
				<view class="search-text">请输入搜索内容</view>
			</view>
		</view>
		<view class="search-content-two" v-else>
			<image class="search-img" src="@/static/images/home/search.png" mode="widthFix"></image>
			<view class="search-content">
				<!-- <view class="search-text">请输入搜索内容</view> -->
				<input class="search-input" type="text" v-model="searchText" :placeholder="placeHolder"
					placeholder-class="placeholder" :focus="searchFocus" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "searchButton",
		props: {
			/* 搜索框类型 */
			searchStatus: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				/* 搜索框 */
				searchText: '', // 搜索框搜索内容
				placeHolder: '请输入搜索内容', // 搜索框
				searchFocus: false, // 搜索框聚焦状态
			};
		},
		methods: {
			
			/*  */
		}
	}
</script>

<style lang="scss">
	.search {
		background-color: #F8F8F8;
		margin: 0 0 30rpx 0;
		padding: 20rpx 30rpx;
		border-radius: 5px;

		.search-content-one {
			display: flex;
			align-items: center;

			.search-img {
				width: 4.6vw;
				height: auto;
			}

			.search-content {
				margin-left: 20rpx;

				.search-text {
					color: #9A9A9A;
					font-size: 28rpx;
					font-family: PingFang_Bold;
				}
			}
		}

		.search-content-two {
			display: flex;
			align-items: center;

			.search-img {
				width: 4.6vw;
				height: auto;
			}

			.search-content {
				margin-left: 20rpx;
				
				.placeholder {
					color: #9A9A9A;
					font-size: 28rpx;
					font-family: PingFang_Bold;
				}

				.search-input {
					color: #000000;
					font-size: 28rpx;
					font-family: PingFang_Bold;
				}
			}
		}
	}
</style>
